import IconFont from '@/components/IconFont';
import { Form, Input, Radio, Select, Space } from 'antd';
import { useState } from 'react';
import { CheckboxGroupField, CommonForm } from '.';
import CommonInput from '../CommonInput';
import CommonTextarea from '../CommonTextarea';
import Typography from '../Typography';

const Demo = (props) => {
  const {} = props;
  const [form] = Form.useForm();
  const [searchForm, setSearchForm] = useState({
    page: 1,
    pageSize: 10,
  });

  return (
    <div style={{ padding: '20px' }}>
      <h3>CommonForm</h3>
      <CommonForm
        formProps={{
          form,
          initialValues: {
            jiegua1: 1,
            jiegua2: 1,
            jiegua3: 1,
            jiegua4: 'asdfasdfasdf',
          },
          onValuesChange(changedValues, values) {
            setSearchForm((pre) => ({ ...pre, ...values }));
          },
        }}
        columns={[
          {
            Component: CheckboxGroupField,
            label: '',
            name: 'CheckboxGroupField',
            props: {
              title: {
                title: '袁总不想封装的checkbox组件',
              },
              numCol: 4,
              titleAction: ['all', 'invert'],
              options: Array.from({ length: 10 }, (_, i) => ({
                label: `节瓜${i}`,
                value: i,
              })),
            },
          },
          {
            label: '节瓜',
            name: 'jiegua1',
            Component: Radio.Group,
            props: {
              placeholder: '节瓜',
              options: [
                {
                  value: 1,
                  label: '10cm',
                },
                {
                  value: 2,
                  label: '20cm',
                },
              ],
            },
          },
          {
            label: '',
            name: 'jiegua2',
            Component: Select,
            rules: [{ required: true, message: '请选择节瓜' }],
            props: {
              placeholder: (
                <>
                  <font color="red">*</font> 请选择节瓜1
                </>
              ),
              size: 'middle',
              suffixIcon: <IconFont type="iconarrow-down"></IconFont>,
              options: [
                {
                  value: 1,
                  label: '10cm',
                },
                {
                  value: 2,
                  label: '20cm',
                },
              ],
            },
          },
          {
            label: '',
            name: 'jiegua3',
            Component: CommonInput,
            rules: [{ required: true, message: '请选择节瓜' }],
            props: {
              size: 'middle',
              placeholder: (
                <>
                  <Typography type="error">*</Typography>&nbsp;请输入节瓜
                </>
              ),
            },
          },
          {
            label: '',
            name: 'jiegua6',
            Component: Input,
            rules: [{ required: true, message: '请选择节瓜' }],
            props: {
              size: 'middle',
              placeholder: '请输入节瓜',
            },
          },
          {
            label: '',
            name: 'jiegua4',
            Component: Input,
            props: {
              size: 'middle',
              placeholder: '请选择节瓜',
              prefix: '名字',
              // disabled: true,
            },
          },
          {
            label: '',
            name: 'jiegua5',
            Component: Input.TextArea,
            props: {
              // size: 'middle',
              placeholder: '请选择节瓜1',
            },
          },
          {
            label: '',
            name: 'jiegua7',
            Component: CommonTextarea,
            props: {
              // size: 'middle',
              // placeholder: '请选择节瓜1',
              showCount: true,
              maxLength: 100,
              style: { resize: 'none' },
              placeholder: (
                <>
                  <Typography type="error">*</Typography>&nbsp;请输入文本
                </>
              ),
            },
          },
          {
            label: '甘大条',
            slot: <>{JSON.stringify(searchForm)}</>,
          },
          {
            block: (
              <Space>
                <Form.Item label="节瓜" name="jiegua">
                  <Input />
                </Form.Item>
                <Form.Item label="节瓜" name="jiegua2">
                  <Input />
                </Form.Item>
              </Space>
            ),
          },
        ]}
      />
    </div>
  );
};
export default Demo;
